<template>
  <div class="container">
    <!--    <img :src="photoSrc" alt="展示图片" class="full-screen-image">-->
    <div class="circle-container">
      <div class="circle">
        <div class="title">全息档案</div> <!-- 添加标题 -->
        <div class="search-box">
          <input type="text" v-model="searchQuery" @keyup.enter="handleSearch" placeholder="搜索..." />
          <button @click="handleSearch">搜索</button>
        </div>
      </div>
      <div class="data-area">
        <div
          v-for="(item, index) in functions"
          :key="item.id"
          class="data-item"
          :style="getItemStyle(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {findCount, findTagList, findTodayAddCount} from "@/api/community/population";

export default {

  data() {
    return {
      peo:'',
      peoadd:0,
      houseadd:0,
      house:0,
      cars:0,
      carsadd:0,
      vidadd:0,
      vid:0,
      photoSrc: require('@/assets/images/320.jpg'),
      searchQuery: '',
    };
  },
  computed: {
    functions() {
      return [
        { id: 1, name: '实口人员档案：' },
        { id: 2, name: `实口档案总量:${this.peo}` },
        { id: 3, name: `实口今日新增:${this.peoadd}` },
        { id: 5, name: `房屋今日新增:${this.houseadd}` },
        { id: 6, name: `房屋档案总量:${this.house}` },
        { id: 7, name: '房屋档案' },
        { id: 8, name: '车辆档案' },
        { id: 9, name: `车辆档案总量:${this.cars}` },
        { id: 10, name: `车辆今日新增:${this.carsadd}` },
        {id: 12, name: `VID档案今日新增:${this.vidadd}`},
        {id: 13, name: `VID档案总量:${this.vid}`},
        {id: 14, name: 'VID视频身份档案'},
      ];
    },
  },
  methods: {
    findTodayAddCount(){
      findTodayAddCount().then(
        res => {
          this.peoadd=res.data
        }
      )
    },
    findPeoCount(){
      findCount().then(
        res => {
          this.peo=res.data
        }
      )
    },
    handleSearch() {
      console.log('搜索处理:', this.searchQuery);
    },
    getItemStyle(index) {
      const angle = (360 / this.functions.length) * index; // 每个项的角度
      const radius = 260; // 增加半径以增加间距
      const x = radius * Math.cos((angle * Math.PI) / 180);
      const y = radius * Math.sin((angle * Math.PI) / 180);
      return {
        position: 'absolute',
        left: `calc(50% + ${x}px)`,
        top: `calc(50% + ${y}px)`,
        transform: 'translate(-50%, -50%)' // 让内容居中
      };
    }
  },

created() {
  this.findPeoCount();
  this.findTodayAddCount();
},
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使其垂直居中 */
  background-image: url('~@/assets/images/320.jpg'); /* 替换为您的图片路径 */
  background-size: cover; /* 使背景图覆盖整个容器 */
  background-position: center; /* 背景图居中 */
}

.circle-container {
  position: relative; /* 使子元素绝对定位参考此容器 */
}

.circle {
  width: 300px; /* 控制圆圈的大小 */
  height: 300px;
  border-radius: 50%; /* 圆形 */
  background-color: rgba(224, 247, 250, 0.8); /* 圆圈的背景色，增加透明度 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center;
  position: relative; /* 让搜索框相对定位 */
  z-index: 1; /* 确保在数据项上面 */
}

.title {
  font-size: 20px; /* 增加标题字体大小 */
  font-weight: bold; /* 加粗标题 */
  margin-bottom: 10px; /* 设置与搜索框的间距 */
  color: white; /* 设置标题字体为白色 */
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  padding: 8px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.data-area {
  width: 300px; /* 与圆圈一样大 */
  height: 300px; /* 与圆圈一样大 */
  position: absolute; /* 绝对定位 */
  left: 0;
  top: 0;
}

.data-item {
  padding: 8px;
  background-color: transparent; /* 背景透明 */
  color: white; /* 字体颜色为白色 */
  border-radius: 5px;
  text-align: center;
  min-width: 70px; /* 控制每项最小宽度 */
  font-size: 18px; /* 增大每项字体大小 */
  font-weight: bold; /* 加粗每项 */
  z-index: 0; /* 确保在圆圈和搜索框下面 */
}
</style>
